<template>
	<view class="shopping">
		<view class="tgs">
			<u-tabs :list="gory_list"  name="title" :is-scroll="false" :current="current" @change="change" :bg-color="'#fff0'" :bar-width="30"></u-tabs>
		</view>
		<view class="sp_item" v-for="(item,index) in list" :key="index">
			<image src="https://img.js.design/assets/img/6767a94719abf04c14627bf6.png#69588999d4b5b8e0aeb8c9414a0bd685" mode="aspectFill"></image>
			<view class="conetn">
				<view class="left">
					<view class="name">{{item.title}}</view>
					<view>特训营包括基础的书写技巧、笔顺、字形结构、书写速度等。</view>
				</view>
				<view class="btn">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { category , good_list } from '@/core/api/index.js'
	import {
		mapGetters,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				gory_list: [],
				current: 0,
				categoryId:'',
				page:1,
				list:[]
			}
		},
		onLoad() {
		   this.CateGory()	
		   this.good_list()
		},
		methods: {
			//获取分类
			async CateGory(){
				const { _data } = await category()
				console.log(_data)
				this.gory_list = _data.list
				this.categoryId = _data.list[0].id
				this.good_list()
			},
			//获取列表good_list
			async good_list(){
				let parme = {
					categoryId:this.categoryId,
					page:this.page,
					pageSize:10
				}
				const { _data } = await good_list(parme)
				console.log(_data)
				this.list = _data.list
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>
<style>
	page{
		background: rgba(249, 249, 249, 1);
	}
</style>

<style lang="scss">
	::v-deep{
		.u-tab-item{
			margin: 0 30rpx;
		}
	}
	.shopping{
		.tgs{
			width: fit-content;
			margin-top: 10rpx;
		}
		.sp_item{
			width: 90%;
			margin: 15rpx auto 0;
			image{
				width: 100%;
				height: 402rpx;
				border-radius: 20rpx 20rpx 0 0;
			}
		}
		.conetn{
			display: flex;
			align-items: center;
			background-color: #fff;
			padding:10rpx 20rpx 20rpx;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			.left{
				flex: 1;
				.name{
					font-size: 32rpx;
					color: rgba(26, 26, 26, 1);

				}
				& view:nth-child(2){
					color: rgba(128, 128, 128, 1);
					font-size: 24rpx;
					margin-top: 6rpx;
				}
			}
			.btn{
				width: 158rpx;
				height: 62rpx;
				opacity: 1;
				border-radius: 84rpx;
				background: rgba(251, 112, 30, 1);
				color: rgba(255, 255, 255, 1);
                font-size: 26rpx;
				text-align: center;
				line-height: 60rpx;
			}
		}
	}
</style>